<template>
  <div class="container" ref="container" />
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeMount } from 'vue'
import * as echarts from 'echarts'

const container = ref<HTMLElement>()
let myChart: any = {}
const props = defineProps({
  options: {
    require: true,
    type: Object,
    default: () => { }
  },
  action: {
    type: Object,
    default: () => { }
  }
})
onBeforeMount(() => {
  window.removeEventListener('resize', resizeHandler)
  stop()
})
onMounted(() => {
  setTimeout(() => {
    if (!container.value) return
    myChart = echarts.init(container.value)
    myChart.setOption(props.options || {})
    myChart.dispatchAction(props.action || {})
  }, 100)
  window.addEventListener('resize', resizeHandler)
})
const resizeHandler = () => {
  setTimeout(() => {
    myChart.resize && myChart.resize()
  }, 80)
}
const stop = watch(() => props.options, val => {
  myChart.setOption(val)
})
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
